@layer theme, base, components, utilities;

@import 'tailwindcss/theme.css' layer(theme);

.vuefinder,
.vuefinder__themer {
  @import 'tailwindcss/preflight.css' layer(base);
}

@import 'tailwindcss/utilities.css' layer(utilities);

/** Previews */
@import './_previews.css';

@import 'overlayscrollbars/styles/overlayscrollbars.css';
@import 'vue-sonner/style.css';

/** Components */
@import './components/_action_message.css';
@import './components/_breadcrumb.css';
@import './components/_context_menu.css';
@import './components/_explorer.css';
@import './components/_drag_item.css';
@import './components/_folder_indicator.css';
@import './components/_folder_loader_indicator.css';
@import './components/_item.css';
@import './components/_item_icon.css';
@import './components/_linear_loader.css';
@import './components/_message.css';
@import './components/_statusbar.css';
@import './components/_tree_view.css';
@import './components/_toast.css';
@import './components/_toolbar.css';
@import './components/_menubar.css';
@import './components/_search_modal.css';
@import './components/_vuefinder.css';

/** Modals */
@import './components/modals/_modal__layout.css';
@import './components/modals/_modal_target.css';
@import './components/modals/_modal_about.css';
@import './components/modals/_modal_archive.css';
@import './components/modals/_modal_delete.css';
@import './components/modals/_modal_header.css';
@import './components/modals/_modal_message.css';
@import './components/modals/_modal_move.css';
@import './components/modals/_modal_new_file.css';
@import './components/modals/_modal_new_folder.css';
@import './components/modals/_modal_preview.css';
@import './components/modals/_modal_rename.css';
@import './components/modals/_modal_unarchive.css';
@import './components/modals/_modal_upload.css';

@import './_themes.css';
@import './_effects.css';
@import './_forms.css';
@import './_scrollbars.css';
@import './_drag_over.css';

@source './src/**/*.{vue,js,ts,jsx,tsx,svg}';

.vf-scrollbars-theme {
  box-sizing: border-box;
  --os-size: 10px;
  --os-padding-perpendicular: 2px;
  --os-padding-axis: 2px;
  --os-track-border-radius: 10px;
  --os-handle-interactive-area-offset: 4px;
  --os-handle-border-radius: 10px;

  /* Default scrollbar colors - will be overridden by theme-specific values */
  --os-handle-bg: var(--vf-scrollbar-handle, var(--vf-border-primary));
  --os-handle-bg-hover: var(--vf-scrollbar-handle-hover, var(--vf-text-tertiary));
  --os-handle-bg-active: var(--vf-scrollbar-handle-active, var(--vf-text-secondary));
}

@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--vf-border-primary, currentColor);
  }

  .vuefinder {
    @apply relative;

    * {
      touch-action: manipulation;
    }

    .vuefinder {
      color-scheme: auto;
    }

    kbd {
      @apply rounded-lg border border-(--vf-border-primary) bg-(--vf-bg-secondary) px-2 py-1 text-xs font-semibold text-(--vf-text-secondary);
    }
  }

  .vuefinder:has(.vuefinder__main__fixed) {
    @apply z-50;
  }

  .selection-area {
    @apply rounded-sm !border border-(--vf-selection-border) bg-(--vf-selection-bg) opacity-50;
  }

  .selection-area-container {
    @apply !z-100;
  }
}
